import Taro from '@tarojs/taro-h5';
import Nerv from "nervjs";
import { Block, Image, Swiper, SwiperItem, Text, View } from '@tarojs/components';
import './index.scss';
import { AtCard, AtSearchBar } from "taro-ui";
import Grid from "../../components/Grid/Grid";
import Card from "../../components/Card/Card";
export default class Index extends Taro.Component {
  constructor() {
    super();
    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    this.config = {
      navigationBarTitleText: '首页'
    };
    this.state = {
      value: '',
      current: 1,
      duration: 500,
      interval: 5000,
      isCircular: true,
      isAutoplay: true,
      hasIndicatorDots: true,
      imgUrls: ['https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180', 'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180', 'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180']
    };
    this.onChange = value => {
      this.setState({
        value: value
      });
    };
    this.onActionClick = () => {
      console.log('开始搜索');
    };
    this.handleClick = (value, index) => {
      console.log(value, index);
    };
    this.state = {
      value: '',
      current: 1,
      duration: 500,
      interval: 5000,
      isCircular: true,
      isAutoplay: true,
      hasIndicatorDots: true,
      imgUrls: ['https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180', 'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180', 'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180']
    };
  }
  componentWillMount() {}
  componentDidMount() {}
  componentWillUnmount() {}
  componentDidShow() {}
  componentDidHide() {}
  handleNavigate(type) {
    switch (type) {
      case 0:
        {
          console.log(type);
        }
        break;
      default:
        {}
    }
  }
  render() {
    const { current, isAutoplay, duration, isCircular, interval, hasIndicatorDots, imgUrls } = this.state;
    return <View className="color-card">
                <AtSearchBar actionName="搜索" value={this.state.value} onChange={this.onChange.bind(this)} onActionClick={this.onActionClick.bind(this)} />
                <AtCard customStyle={'box-shadow'}>
                    <Swiper indicatorColor="#999" indicatorActiveColor="#333" current={current} duration={duration} interval={interval} circular={isCircular} autoplay={isAutoplay} indicatorDots={hasIndicatorDots}>
                        {imgUrls.map((item, idx) => <SwiperItem key={idx}>
                                    <Image src={item} />
                                </SwiperItem>)}
                    </Swiper>
                </AtCard>
                <View>
                    <Grid columnNum={4} bold={true} iconSize={0.5} data={[{
          image: 'http://makefriends.bs2dl.yy.com/%E4%B9%A6%E5%9F%8E.png',
          value: '功能1'
        }, {
          image: 'http://makefriends.bs2dl.yy.com/%E6%A6%9C%E5%8D%95.png',
          value: '功能2'
        }, {
          image: 'http://makefriends.bs2dl.yy.com/%E7%AD%BE%E5%88%B0.png',
          value: '功能3'
        }, {
          image: 'http://makefriends.bs2dl.yy.com/%E5%88%86%E7%B1%BB.png',
          value: '功能4'
        }]} />
                </View>
                
                
                
                
                
                
                
                
                

                <View style={{ 'margin': '15px 0 0 0', 'padding': '0 0 115px 0' }}>
                    {imgUrls.map(item => <Block><Card>
                                <Image className="detail_content_container_icon" src={item} />
                                <View className="detail_content_container_content_groups">
                                    <View className="detail_content_container_content_group">
                                        <Text>Feels like</Text>
                                        <Text>1111</Text>
                                    </View>
                                    <View className="detail_content_container_content_group">
                                        <Text>Humidity</Text>
                                        <Text>2222</Text>
                                    </View>
                                    <View className="detail_content_container_content_group">
                                        <Text>Visibility</Text>
                                        <Text>3333</Text>
                                    </View>
                                    <View className="detail_content_container_content_group">
                                        <Text>UV Index</Text>
                                        <Text>4444</Text>
                                    </View>
                                </View>
                            </Card></Block>)}
                </View>
            </View>;
  }
}